$class-prefix-popup: rt-popup;

.#{$class-prefix-popup} {
  --z-index: var(--rt-popup-z-index, 999);

  position: fixed;
  z-index: var(--z-index);

  .#{$class-prefix-popup}-mask {
    z-index: 0;
  }
}

.#{$class-prefix-popup}-body {
  position: fixed;
  background-color: var(--rt-color-background);
  z-index: 1;
  .#{$class-prefix-popup}-close-icon {
    position: absolute;
    z-index: 2;
    cursor: pointer;
    padding: 1px;
    font-size: 14px;
    line-height: 1;
    color: var(--rt-color-weak);
  }

  &-position-bottom {
    width: 100%;
    bottom: 0;
    left: 0;
    max-height: 70%;
    .#{$class-prefix-popup}-close-icon {
      right: 5px;
      top: 5px;
    }
  }
  &-position-top {
    width: 100%;
    top: 0;
    left: 0;
    max-height: 70%;
    .#{$class-prefix-popup}-close-icon {
      right: 5px;
      bottom: 5px;
    }
  }
  &-position-left {
    height: 100%;
    top: 0;
    left: 0;
    .#{$class-prefix-popup}-close-icon {
      right: 5px;
      top: 5px;
    }
  }
  &-position-right {
    height: 100%;
    top: 0;
    right: 0;
    .#{$class-prefix-popup}-close-icon {
      left: 5px;
      top: 5px;
    }
  }
}
